<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0" />
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <title>传智云购-购物车</title>
    <link type="image/x-icon" rel="shortcut icon" href="images/favicon.ico">
    <link rel="stylesheet" href="res/mui/css/mui.min.css" />
    <link rel="stylesheet" href="res/fontAwesome/css/font-awesome.min.css" />
    <link rel="stylesheet" href="css/common.css" />
    <link rel="stylesheet" href="css/cart.css" />
    <style>
        * { touch-action: none; }
        .cz_container{
            padding-top: 0px;
            margin-top: 45px;
        }
    </style>
</head>

<body>
    <div class="cz_layout">
        <header class="cz_topBar">
            <a href="javascript:history.back();" class="icon_back fa fa-arrow-left"></a>
            <span class="title">购物车</span>
            <a href="javascript:;" class="icon_refresh fa fa-refresh"></a>
        </header>
        <div class="cz_container mui-scroll-wrapper">
            <div class="box" class="mui-scroll">
                <ul class="mui-table-view mui-table-view-chevron">

                </ul>
            </div>

            <div class="cart_order">订单总额：&yen;1022.00 <a href="#">生成订单</a></div>
        </div>
        <footer class="cz_tabs">
            <a class="tab_home fa fa-home" href="index.html"><span>首页</span></a>
            <a class="tab_cate fa fa-bars" href="cate.html"><span>分类</span></a>
            <a class="tab_cart fa fa-shopping-cart now" href="cart.html"><span>购物车</span></a>
            <a class="tab_user fa fa-user" href="user/index.html"><span>会员中心</span></a>
        </footer>
    </div>
    <script src="res/mui/js/mui.min.js"></script>
    <script src="./assets/vendors/jquery/jquery.min.js"></script>
    <script src="./assets/vendors/template-web.js"></script>
    <script src="/assets/vendors/layer/layer.js"></script>
    <script type="text/template" id="tpl">
        {{each data value}}
            <li data-product="" class="mui-table-view-cell">
                    <div class="mui-slider-right mui-disabled">
                        <a class="mui-btn mui-btn-blue">编辑</a>
                        <a class="mui-btn mui-btn-red">删除</a>
                    </div>
                    <a href="javascript:;" class="mui-navigate-right mui-slider-handle">
                        <img class="mui-media-object mui-pull-left" src="/api{{value.pic[0].picAddr}}">
                        <div class="mui-media-body">
                            <p class="name">{{value.proName}}</p>
                            <p class="info">
                                <span class="price">&yen;{{value.price}}</span>
                                <span class="oldPrice">&yen;{{value.oldPrice}}</span>
                                <span class="number">x{{value.statu}}</span>
                            </p>
                            <p><span class="size">鞋码：{{value.size}}</span></p>
                        </div>
                        <input type="checkbox" />
                    </a>
                </li>
        {{/each}}
    </script>
    <script>
        // -------------------   MUI   ------------------
        mui(function () {
            mui.init();
            mui('.mui-table-view').on('tap', '.mui-btn-red', function () {
                var btnArray = ['是', '否'];
                mui.confirm('你要删除这件商品吗？', '温馨提示', btnArray, function (e) {
                    if (e.index == 0) {

                    } else {

                    }
                })
            });
            mui('.mui-table-view').on('tap', '.mui-btn-blue', function (e) {
                e.detail.gesture.preventDefault(); //修复iOS 8.x平台存在的bug，使用plus.nativeUI.prompt会造成输入法闪一下又没了
                var btnArray = ['确定', '取消'];
                var template = '<input type="number" placeholder="选择数量"/><br>' +
                    '<input type="text" placeholder="选择尺码" />';
                mui.confirm(template, '编辑商品', btnArray, function (e) {
                    if (e.index == 0) {

                    } else {

                    }
                })
            });
            mui('.mui-scroll-wrapper').scroll({
                scrollY: true, //是否竖向滚动
                scrollX: false, //是否横向滚动
                startX: 0, //初始化时滚动至x
                startY: 0, //初始化时滚动至y
                indicators: false, //是否显示滚动条
                deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏
                bounce: true, //是否启用回弹
            });
        });

        var page = 1;
        var pageSize = 5;

        // 下拉刷新
        mui.init({
            pullRefresh: {
                container: ".cz_container", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
                down: {
                    height: 50, //可选,默认50.触发下拉刷新拖动距离,
                    auto: true, //可选,默认false.首次加载自动下拉刷新一次
                    contentdown: "下拉可以刷新", //可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
                    contentover: "释放立即刷新", //可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
                    contentrefresh: "正在刷新...", //可选，正在刷新状态时，下拉刷新控件上显示的标题内容
                    callback: function () {
                        page = 1;
                        $.ajax({
                            url: '/api/cart/queryCartPaging',
                            type: 'get',
                            data: {
                                page: page,
                                pageSize: pageSize
                            },
                            success: function (msg) {
                                if (msg.error) {
                                    layer.msg('请先登录', {
                                        shift: 5,
                                        time: 700
                                    }, function () {
                                        location.href = '/user/login.html?url=' +
                                            location.href;
                                        return;
                                    })
                                }
                                console.log(msg);
                                var strHtml = template('tpl', msg);
                                $('.mui-table-view').html(strHtml);
                            }
                        });
                        //刷新后关闭 
                        mui('.cz_container').pullRefresh().endPulldownToRefresh();
                    } //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
                },
                up: {
                    height: 50, //可选.默认50.触发上拉加载拖动距离
                    // auto: false, //可选,默认false.自动上拉加载一次
                    contentrefresh: "正在加载...", //可选，正在加载状态时，上拉加载控件上显示的标题内容
                    contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；
                    callback: function () {
                        //启动下拉刷新
                        mui('.cz_container').pullRefresh().enablePullupToRefresh();
                        page = page + 1;
                        // console.log(page);

                        $.ajax({
                            url: '/api/cart/queryCartPaging',
                            type: 'get',
                            data: {
                                page: page,
                                pageSize: pageSize
                            },
                            success: function (msg) {
                                // console.log(msg.length);
                                // 判断返回数据的长度 如果长度为0  就停止下拉刷新
                                if (msg.length == 0) {
                                    mui('.cz_container').pullRefresh().disablePullupToRefresh();
                                }

                                if (msg.error) {
                                    layer.msg('请先登录', {
                                        shift: 5,
                                        time: 700
                                    }, function () {
                                        location.href = '/user/login.html?url=' +
                                            location.href;
                                        return;
                                    })
                                }
                                // console.log(msg);
                                var strHtml = template('tpl', msg);
                                $('.mui-table-view').append(strHtml);
                                // 加载完成了!!!
                                mui('.cz_container').pullRefresh().endPullupToRefresh();
                              
                            }
                        });
                        
                    } //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
                }
            }
        });
    </script>
</body>

</html>